import React,{useEffect,useState,useRef} from 'react'

export default function SkuBar({title,list,onSelected}) {
    const [activeIndex, setActiveIndex] = useState()

    const selectAction=(index,item)=>{
        if(index===activeIndex){
            setActiveIndex(-1);
            //通知父组件
            onSelected(title,null)
        }else{
            setActiveIndex(index);
            onSelected(title,item)

        }
    }
    return (
        <div className='sku-bar'>
            <h3 className='sku-title'>{title}</h3>
            <ul className="sku-list">
                {
                    list.map((item,index)=>(
                        <li key={item.get('id')} className={`sku-item ${activeIndex===index?'active':''}`} onClick={()=>selectAction(index,item)}>{item.get('value')}</li>
                    ))
                }
            </ul>
        </div>
    )
}
